<template>
  <div class="container">
    <el-scrollbar
      v-show="messageAll.length > 0"
      style="overflow: auto; height: 300px"
    >
      <div
        class="infinite-list"
        v-infinite-scroll="loadTips"
        infinite-scroll-delay="10"
      >
        <el-collapse accordion>
          <el-collapse-item v-for="(item, index) in messageAll" :key="item.id">
            <template #title>
              <div class="collapse-item" @click="handleOpen(item, index)">
                <div class="collapse-item_left">{{ item.title }}</div>
                <div class="collapse-item_right">
                  <div v-if="item.isFlag" class="collapse-item_status"></div>
                </div>
              </div>
            </template>
            <div v-html="item.content" @click="jump(item)"></div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-scrollbar>
    <el-empty
      v-show="messageAll.length === 0"
      :image-size="100"
      description="暂无数据"
    ></el-empty>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { postMessageAll, postMessageInfo } from "/@/api/notice";
const router = useRouter();
let messageAll = ref([]);
let pageNum = ref(1);

const jump = item => {
  item.ext1 &&
    router.push({
      path: "/project/implementation/detail",
      query: { id: item.ext1, mode: "edit" }
    });
};

const initGetList = async (num: number) => {
  try {
    const { code, data } = await postMessageAll({
      pageNum: num,
      pageSize: 10,
      perMsgType: "1"
    });
    if (code === 200) {
      if (data.list.length > 0) {
        const newData = data.list.map(item => {
          if (item.perMsgType === "1") {
            item.isFlag = true;
          } else {
            item.isFlag = false;
          }
          return item;
        });

        messageAll.value = messageAll.value.concat(newData);
      }
    }
  } catch (err) {
    console.log(err);
  }
};

const loadTips = () => {
  if (messageAll.value.length > 9) {
    pageNum.value++;
    initGetList(pageNum.value);
  }
};

const handleOpen = async (item, index) => {
  messageAll.value[index].isFlag = false;
  if (item.perMsgType === "1") {
    await postMessageInfo({ id: item.id });
  }
};

onMounted(() => {
  initGetList(pageNum.value);
});
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  .collapse-item {
    width: 95%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow-x: hidden;
    &_left {
      flex: 1;
      overflow: hidden; /*超出部分隐藏*/
      text-overflow: ellipsis; /* 超出部分显示省略号 */
      white-space: nowrap; /*规定段落中的文本不进行换行 */
      word-break: break-all;
    }
    &_right {
      width: 20px;
    }
    &_status {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: red;
    }
  }
}
</style>
